<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父向子</title>
</head>
<body>
<div id="app">
    <heima v-bind:user="info" v-bind:edit="true" :num="80"></heima>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    var heima = {
        template: `
        <div>
        是否编辑? {{edit?"编辑":"不编辑"}}<br>
        num : {{num}}
        <button>我是:{{user.name}},今年:{{user.age}},id为{{user.id}}</button>
        </div>
        `,
        props: {
            user: {
                type: Object,
                default: {}
            },
            edit:{
                type: Boolean,
                default: false
            },
            num:{
              type:Number,
                default:15
            }
        }
    };


    var app = new Vue({
        el: "#app",
        components: {
            heima
        },
        data: {
            info: {
                id: 10086,
                name: "欣小萌",
                age: 18
            },

        }

    })
</script>
</body>
</html>